<template>
	<div class="paypage">
		<van-nav-bar title="订单详情">
			<template #left>
				<van-icon name="cross" size="18" color="black" @click="closeOrder"/>
			</template>
			<!-- <template #right>
				<van-icon name="share-o" size="18" color="black" />
			</template> -->
		</van-nav-bar>
		<div class="paytime">
			<div>
				<van-icon name="clock" color="#1A73E8" />待付款
			</div>
			<div class="mt-10">请与<span style="color:red">{{time}}秒</span>内付款，超时订单将自动关闭</div>
		</div>
		<div style="height:5px;background:#eee" />
		<van-cell :title="shopname" icon="shop-o"  :to="{ name: 'shopindex' }"/>
		<van-card num="1" price="2.00" :desc="product.description" :title="product.title" v-for="(product,index) in list" :key="index">
			<template #thumb>
				<van-image width="100" height="90" :src="product.cover" />
			</template>
			<template #price>
				<span style="color:#aaa">￥{{product.price}}</span>
			</template>
			<template #footer>
				<span>需付款：</span><span style="color:red;font-size:15px">￥{{item[index].paid_fee}}</span>
			</template>
		</van-card>
		<div style="height:5px;background:#eee" />
		<!-- <van-cell title="留言" value="无" style="font-size: 12px;" /> -->
		<div style="height:5px;background:#eee" />
		<div
			style="height: 90px;display: flex;flex-direction: column;background: white;font-size: 12px;color:#aaa;margin-bottom:100px;">
			<div class="ml-10 mt-10" v-if="item[0]">订单编号：{{item[0].order_no}}<button class="copyordernum" @click="copyordernum(item[0].order_no)">复制</button></div>
			<div class="ml-10 mt-10" v-if="item[0]">创建时间：{{item[0].create_time}}</div>
			<van-divider />
			<div style="text-align:center;background: white;line-height:40px;">
				<van-icon name="audio" size="18" color="orange" /><span style="color:black" v-if="item[0]" @click="gokefuchat(item[0].id)">联系客服</span>
			</div>
		</div>
		<div class="fixpay">
			<van-button type="warning" class="fr"
				style="border-radius: 15px;height: 25px;width:80px;margin-top:10px;margin-right: 10px;"
				@click="payOrder">去支付</van-button>
			<van-button class="fr"
				style="border-radius: 15px;height: 25px;width:90px;;margin-top:10px;margin-right: 10px;"
				@click="closeOrder">取消订单</van-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				shopname: localStorage.getItem('shopname')?localStorage.getItem('shopname'):'', //店铺名
				item: '',
				time: 300,
				id:'',
				stime:'',
				product:'',
				list:[],
				ordernumber:""
			}
		},
		methods: {
			closeOrder(){
               this.$dialog.confirm({
               title: '取消订单',
              message: '确认取消订单吗？',
             })
            .then(() => {
                  this.cancelOrder();
               })
              .catch(() => {
                   // on cancel
             });
			},
			copyordernum(ordernum){
                copyToClipBoard(ordernum);
				this.$toast.success('复制订单号成功');
			},
			//联系客服按钮
             gokefuchat(orderid) {
            this.$router.push({ name: "kefuchat",query:{orderid}});
             },
			async payOrder() {
				let randcode=this.$route.query.randcode;
				let total_fee=this.$route.query.allprice;
				let ordernumber=this.ordernumber;
				let body='您花了'+total_fee+'买了订单号'+ordernumber+'的多个商品';
				if (isWeixin()) {
                   let res = await this.$frontaxios.post(this.$front.getWeiXinMorePayData,{total_fee,ordernumber,body,randcode});
				   console.log(res);
				   if(res.code==1){
				   let data=res.data.weixinpaydata;
				   this.callpay(data);
				   }else{
					console.log('没有获得支付数据参数')
				   }
				} else {
					alert("请在微信里打开支付");
				}
			},
			async cancelOrder() {
				let res0 = await this.$frontaxios.post(this.$front.updateMoreOrderState, {ordernumber:this.ordernumber});
				if (res0.code == 1) {
					this.$toast.fail('订单已经取消');
					this.$router.back();
				}
			},
			jsApiCall(data) {
				var that=this;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', data,
					function(res) {
						WeixinJSBridge.log(res.err_msg);
						//alert('err_code:'+res.err_code+'err_desc:'+res.err_desc+'err_msg:'+res.err_msg);
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							//alert("支付成功!");
							clearInterval(that.stime);
							that.$toast.success("支付成功");
							that.$router.push({name: 'shopindex'});
							that.$frontaxios.post(that.$front.clearShopCart,{ordernumber:that.ordernumber});
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							that.$toast.success("用户取消支付!");
						} else {
							that.$toast.success("支付失败!");
						}
					}
				);
			},
			callpay(data) {
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.jsApiCall(data), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.jsApiCall(data));
						document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall(data));
					}
				} else {
					this.jsApiCall(data);
				}
			}
		},
		async created() {
			this.ordernumber= this.$route.query.ordernumber;
			this.stime = setInterval(async () => {
				this.time--
				if (this.time <= 0) {
					this.time = 0;
					let res0 = await this.$frontaxios.post(this.$front.updateMoreOrderState, {
						ordernumber:this.ordernumber
					});
					//console.log(res0);
					if (res0.code == 1) {
						this.$notify({
							type: 'warning',
							message: '订单超时未付款，订单已经关闭'
						});
						this.$router.push({name:'shopcart'});
					}
					clearInterval(this.stime);
				}
			}, 1000)
			let res = await this.$frontaxios.post(this.$front.getMoreOrder, {ordernumber:this.ordernumber});
			console.log(res);
			if (res.code == 0) {
				this.item=res.data;
				for(let i of res.data){
					this.list.push(eval('('+i.products+')'));
				}
			} else {
				console.log('得到订单信息失败');
			}
		}
	}
</script>

<style lang="scss">
	.paypage {
		height: 100vh;
		background-color: #eee;
		overflow: scroll;

		.paytime {
			height: 100px;
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			font-size: 12px;
			background: white;
		}

		.van-card {
			background-color: white;
		}

		.van-divider {
			margin-bottom: 0px;
		}

		.copyordernum {
			width: 35px;
			height: 10;
			border-radius: 20px;
			font-size: 5px;
			border: 1px solid #aaa;
			background: white;
			float: right;
			margin-right: 10px;
		}

		.fixpay {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			height: 50px;
			background-color: #fafafa;
			line-height: 50px;
		}
	}
</style>
